// 导入React的useEffect和useState钩子
import { useEffect, useState } from "react";
// 导入Ant Design的Input和message组件
import { Input, message, Form, Select } from "antd";
// 导入自定义的useStore钩子
import { useStore } from "@/store";
// 导入React Router的useLocation和useNavigate钩子
import { useLocation, useNavigate } from "react-router-dom";
// 导入自定义的putRequest函数
import { putRequest } from "@/request";
// 导入自定义的SessionStorageService服务
import SessionStorageService from "@/SessionStorageService";
// 导入Arco Design的Button、Drawer、Dropdown、Menu组件
import { Button, Drawer, Menu } from "@arco-design/web-react";
// 导入Arco Design的IconDown组件
// import { IconDown } from "@arco-design/web-react/icon";

// 导入自定义的TextModal、ImageModal、VideoModal和CodeModal组件
import TextModal from "./TextModal";
import ImageModal from "./ImageModal";
import VideoModal from "./VideoModal";
import CodeModal from "./CodeModal";
import BackModal from "./BackModal";

const PPTEditBlock = () => {
  // 创建一个状态变量，用于控制模态框的显示与隐藏
  const [modalVisible, setModalVisible] = useState(false);
  // 创建一个状态变量，用于存储输入框的值
  const [inputValue, setInputValue] = useState("");
  // 使用useNavigate钩子函数，用于导航到其他页面
  const navigate = useNavigate();
  // 使用useLocation钩子函数，获取当前页面的URL信息
  const { search } = useLocation();
  // 创建一个URLSearchParams对象，用于解析URL中的查询参数
  const params = new URLSearchParams(search);
  // 获取title和id的值
  const query = {
    title: params?.get("title") || "",
    id: params?.get("id") || "",
  };

  const [form] = Form.useForm();
  const PPtBgtypeWatch = Form.useWatch("PPtBgtype", form);

  // 从useStore中解构出powerPointParId、powerPointParArr、powerPointArr、curpowerPointIndex、updatePowerPointIndex、modifyPowerPointTitle、powerPointTitle
  const {
    powerPointParId,
    powerPointParArr,
    powerPointArr,
    curpowerPointIndex,
    updatePowerPointIndex,
    modifyPowerPointTitle,
    modifyArbitraryValue,
    powerPointTitle,
    powerPointImage,
    PPtBgtype,
    PPtBgValue1,
    PPtBgValue2,
  } = useStore();
  // 定义visibleTextModal状态，初始值为false，用于控制文本模态框的显示与隐藏
  const [visibleTextModal, setVisibleTextModal] = useState(false);
  // 定义visibleImageModal状态，初始值为false，用于控制图片模态框的显示与隐藏
  const [visibleImageModal, setVisibleImageModal] = useState(false);
  // 定义visibleVideoModal状态，初始值为false，用于控制视频模态框的显示与隐藏
  const [visibleVideoModal, setVisibleVideoModal] = useState(false);
  // 定义visibleCodeModal状态，初始值为false，用于控制代码模态框的显示与隐藏
  const [visibleCodeModal, setVisibleCodeModal] = useState(false);
  const [visibleBackModal, setVisibleBackModal] = useState(false);
  // 定义isAdd状态，初始值为true，用于判断是添加还是修改
  const [isAdd, setIsAdd] = useState(true);
  // 定义elementsIndex状态，初始值为0，用于记录当前元素的索引
  const [elementsIndex, setElementsIndex] = useState(0);

  // 处理左箭头事件
  const handleLeftArrow = () => {
    // 如果当前幻灯片索引为1，则返回
    if (curpowerPointIndex === 1) return;
    // 更新幻灯片索引
    updatePowerPointIndex(curpowerPointIndex - 1);
  };
  // 定义一个函数，用于处理右箭头按键事件
  const handleRightArrow = () => {
    // 如果当前幻灯片索引等于幻灯片数组长度，则返回
    if (curpowerPointIndex === powerPointArr.length) return;
    // 更新当前幻灯片索引为当前索引加1
    updatePowerPointIndex(curpowerPointIndex + 1);
  };
  useEffect(() => {
    // 定义键盘事件处理函数
    const handleKeyDown = (event) => {
      switch (event.key) {
        case "ArrowLeft":
          handleLeftArrow();
          break;
        case "ArrowRight":
          handleRightArrow();
          break;
        default:
          break;
      }
    };
    // 添加键盘事件监听器
    window.addEventListener("keydown", handleKeyDown);
    // 返回一个清理函数，在组件卸载时移除事件监听器
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [curpowerPointIndex]); // 空数组作为依赖项，确保只在组件挂载和卸载时运行一次

  // 双击进入编辑状态
  // 处理传递事件
  const handlePassEvent = (e) => {
    // 如果事件存在且事件详情存在
    if (e && e.detail) {
      // 如果事件类型为文本
      if (e.detail.type === "Text") {
        // 设置文本模态框可见
        setVisibleTextModal(true);
        // 在一段时间后设置文本模态框不可见
        setTimeout(() => {
          setVisibleTextModal(false);
        });
        // 设置添加状态为false
        setIsAdd(false);
        // 设置元素索引
        setElementsIndex(e.detail.elementsIndex);
      }
      // 如果事件类型为图片
      if (e.detail.type === "Image") {
        // 设置图片模态框可见
        setVisibleImageModal(true);
        // 在一段时间后设置图片模态框不可见
        setTimeout(() => {
          setVisibleImageModal(false);
        });
        // 设置添加状态为false
        setIsAdd(false);
        // 设置元素索引
        setElementsIndex(e.detail.elementsIndex);
      }
      // 如果事件类型为视频
      if (e.detail.type === "Video") {
        // 设置视频模态框可见
        setVisibleVideoModal(true);
        // 在一段时间后设置视频模态框不可见
        setTimeout(() => {
          setVisibleVideoModal(false);
        });
        // 设置添加状态为false
        setIsAdd(false);
        // 设置元素索引
        setElementsIndex(e.detail.elementsIndex);
      }
      // 如果事件类型为代码
      if (e.detail.type === "Code") {
        // 设置代码模态框可见
        setVisibleCodeModal(true);
        // 在一段时间后设置代码模态框不可见
        setTimeout(() => {
          setVisibleCodeModal(false);
        });
        // 设置添加状态为false
        setIsAdd(false);
        // 设置元素索引
        setElementsIndex(e.detail.elementsIndex);
      }
    }
  };

  // 使用effect钩子，在组件挂载时添加事件监听，在组件卸载时移除事件监听
  useEffect(() => {
    document.addEventListener("passEvent", handlePassEvent);
    return () => {
      document.removeEventListener("passEvent", handlePassEvent);
    };
  }, []);

  // 处理保存事件
  const handleSave = () => {
    // 创建一个存储对象
    const storeBro = {
      powerPointArr,
      powerPointTitle,
      powerPointImage,
      id: powerPointParId,
      PPtBgtype,
      PPtBgValue1,
      PPtBgValue2,
    };
    // const storeBro = { powerPointArr, powerPointTitle };
    // 保存的时候分新建和编辑：
    // 新建==就是给slideFatnerList后面加一个
    // 编辑==就是sildeFatherId进行更新的操作，更新slideTitle、powerPointArr、id
    if (query && query.id) {
      const sumBro = SessionStorageService.getItem("store") || [];
      const slideFatnerListBro = [...sumBro];
      const flagIndex = slideFatnerListBro.findIndex(
        (item) => item?.id === query?.id
      );
      if (flagIndex !== -1) {
        slideFatnerListBro[flagIndex] = { ...storeBro };
        putRequest("/store", { store: slideFatnerListBro }).then(() => {
          message.success("保存成功");
          navigate("/pptList");
        });
      }
    } else {
      // 走新建
      powerPointParArr.push(storeBro);
      putRequest("/store", { store: powerPointParArr }).then(() => {
        message.success("保存成功");
        navigate("/pptList");
      });
    }
  };

  // 点击取消按钮时，将模态框隐藏，并将输入框的值清空
  const handleCancel = () => {
    setModalVisible(false);
    setInputValue("");
  };

  // 点击确定按钮时，首先判断输入框的值是否为空，如果为空则提示用户输入幻灯片标题，否则将模态框隐藏，修改幻灯片标题，并调用handleCancel函数
  const handleOK = () => {
    form.validateFields().then((values) => {
      console.log("表单数据:", values);
      setModalVisible(false);
      modifyPowerPointTitle(values?.powerPointTitle);
      modifyArbitraryValue({
        powerPointImage: values?.powerPointImage,
        PPtBgtype: values?.PPtBgtype,
        PPtBgValue1: values?.PPtBgValue1,
        PPtBgValue2: values?.PPtBgValue2,
      });
      handleCancel();
    });
  };

  // 定义一个函数，用于渲染下拉菜单
  // eslint-disable-next-line no-unused-vars
  const dropList = () => {
    return (
      <Menu>
        {/* 新增文本 */}
        <Menu.Item key="1">
          <Button
            key="1"
            type="primary"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr?.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置文本模态框可见
              setVisibleTextModal(true);
              // 1秒后关闭文本模态框
              setTimeout(() => {
                setVisibleTextModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增文本
          </Button>
        </Menu.Item>
        {/* 新增图片 */}
        <Menu.Item key="2">
          <Button
            type="primary"
            key="2"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置图片模态框可见
              setVisibleImageModal(true);
              // 1秒后关闭图片模态框
              setTimeout(() => {
                setVisibleImageModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增图片
          </Button>
        </Menu.Item>
        {/* 新增视频 */}
        <Menu.Item key="3">
          <Button
            key="3"
            type="primary"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置视频模态框可见
              setVisibleVideoModal(true);
              // 1秒后关闭视频模态框
              setTimeout(() => {
                setVisibleVideoModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增视频
          </Button>
        </Menu.Item>
        {/* 新增代码 */}
        <Menu.Item key="4">
          <Button
            type="primary"
            key="4"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置代码模态框可见
              setVisibleCodeModal(true);
              // 1秒后关闭代码模态框
              setTimeout(() => {
                setVisibleCodeModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增代码
          </Button>
        </Menu.Item>
      </Menu>
    );
  };

  return (
    <div
      style={{
        // 设置显示方式为弹性布局
        display: "flex",
        // 垂直方向居中对齐
        alignContent: "center",
        // 水平方向两端对齐
        justifyContent: "space-between",
        // 宽度为100%
        width: "100%",
        // 高度为62px
        height: "62px",
        // 内边距为16px
        padding: "16px",
        // 背景颜色为白色
        backgroundColor: "white",
        // 底部边框为1px的实线，颜色为#e8e8e8
        borderBottom: "1px solid #e8e8e8",
        // 水平方向布局方式为行
        flexDirection: "row",
        // 右边框为1px的实线，颜色为#e8e8e8
        borderRight: "1px solid #e8e8e8",
      }}
    >
      <div
        style={{ position: "relative", cursor: "pointer" }}
        onClick={() => {
          form.setFieldsValue({
            powerPointTitle: powerPointTitle,
            powerPointImage: powerPointImage,
            PPtBgtype: PPtBgtype,
            PPtBgValue1: PPtBgValue1,
            PPtBgValue2: PPtBgValue2,
          });
          setModalVisible(true);
        }}
      >
        <div
          // 设置样式
          style={{
            // 设置宽度为250
            width: 250,
            // 超出部分隐藏
            overflow: "hidden",
            // 设置字体加粗
            fontWeight: 600,
            // 设置字体大小为18
            fontSize: 18,
            // 不换行
            whiteSpace: "nowrap",
            // 超出部分用省略号表示
            textOverflow: "ellipsis",
          }}
        >
          {powerPointTitle}
        </div>
        <div
          // 设置样式
          style={{
            // 字体大小
            fontSize: 12,
            // 鼠标样式
            cursor: "pointer",
            // 定位方式
            position: "absolute",
            // 层级
            zIndex: 2,
            // 左边距
            left: 0,
            // 顶部边距
            top: -12,
            // 字体颜色
            color: "#c1c1c1",
          }}
        >
          编辑标题和缩略图
        </div>
      </div>
      <div
        // 设置样式
        style={{
          // 设置元素为弹性布局
          display: "flex",
          // 设置宽度为100
          width: 480,
          // 设置元素之间的间距为平均分布
          justifyContent: "space-between",
          // 设置左边距为40
          marginLeft: 40,
          // backgroundColor: "#679ef5",
        }}
      >
        <>
          <Button
            key="1"
            type="primary"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr?.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置文本模态框可见
              setVisibleTextModal(true);
              // 1秒后关闭文本模态框
              setTimeout(() => {
                setVisibleTextModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增文本
          </Button>
          <Button
            type="primary"
            key="2"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置图片模态框可见
              setVisibleImageModal(true);
              // 1秒后关闭图片模态框
              setTimeout(() => {
                setVisibleImageModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增图片
          </Button>
          <Button
            key="3"
            type="primary"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置视频模态框可见
              setVisibleVideoModal(true);
              // 1秒后关闭视频模态框
              setTimeout(() => {
                setVisibleVideoModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增视频
          </Button>
          <Button
            type="primary"
            key="4"
            onClick={() => {
              // 如果当前幻灯片索引为0或者幻灯片数组为空，则提示用户先新增一张幻灯片
              if (curpowerPointIndex === 0 || powerPointArr.length === 0) {
                message.error("请先新增一张幻灯片");
                return;
              }
              // 设置代码模态框可见
              setVisibleCodeModal(true);
              // 1秒后关闭代码模态框
              setTimeout(() => {
                setVisibleCodeModal(false);
              });
              // 设置为新增状态
              setIsAdd(true);
            }}
          >
            新增代码
          </Button>
          <Button
            type="primary"
            key="4"
            onClick={() => {
              // 设置背景
              setVisibleBackModal(true);
              setTimeout(() => {
                setVisibleBackModal(false);
              });
            }}
          >
            设置背景
          </Button>
          {/* <Dropdown droplist={dropList()} position="br">
            <Button type="text">
              新增元素 <IconDown />
            </Button>
          </Dropdown> */}
        </>
      </div>
      <div
        // 设置样式
        style={{
          // 设置显示方式为弹性布局
          display: "flex",
          // 设置垂直对齐方式为居中
          alignContent: "center",
          // 设置水平对齐方式为两端对齐
          justifyContent: "space-between",
          // 设置文字颜色为#6b7280
          color: "#6b7280",
          // 设置宽度为140
          width: 140,
          // 设置上边距为4
          paddingTop: 4,
        }}
      >
        <div
          style={{
            cursor: "pointer",
            color: curpowerPointIndex === 1 ? "#bfbfbf" : "#1677ff",
          }}
          onClick={() => {
            if (curpowerPointIndex === 1) return;
            updatePowerPointIndex(curpowerPointIndex - 1);
          }}
        >
          上一张
        </div>
        <div style={{}}>
          {curpowerPointIndex}/{powerPointArr.length}
        </div>
        <div
          style={{
            cursor: "pointer",
            color:
              curpowerPointIndex === powerPointArr.length
                ? "#bfbfbf"
                : "#1677ff",
          }}
          onClick={() => {
            if (curpowerPointIndex === powerPointArr.length) return;
            updatePowerPointIndex(curpowerPointIndex + 1);
          }}
        >
          下一张
        </div>
      </div>
      <div
        // 设置样式
        style={{
          // 设置元素为弹性布局
          display: "flex",
          // 设置宽度为200
          width: 120,
          // 设置水平方向上的对齐方式为右对齐
          justifyContent: "right",
          // 设置左边距为40
          marginLeft: 40,
        }}
      >
        <Button
          type="primary"
          style={{ marginRight: 10 }}
          onClick={() => {
            handleSave();
          }}
        >
          保存
        </Button>
        <Button
          type="outline"
          onClick={() => {
            navigate("/pptList");
          }}
        >
          返回
        </Button>
      </div>
      {/* 代码弹窗 */}
      {/* // 显示CodeModal组件 */}
      <CodeModal
        // 是否显示CodeModal组件
        visibleCodeModal={visibleCodeModal}
        // 是否是添加操作
        isAdd={isAdd}
        // 元素索引
        elementsIndex={elementsIndex}
      />
      <BackModal visibleBackModal={visibleBackModal} />
      {/* // 显示Drawer组件 */}
      <Drawer
        width={500}
        title="PPT设置"
        visible={modalVisible}
        onCancel={handleCancel}
        onOk={handleOK}
        okText="保存"
        cancelText="取消"
      >
        <Form
          // 设置表单标签的宽度
          labelCol={{ span: 8 }}
          // 设置表单实例
          form={form}
          // 设置表单的初始值
          initialValues={{
            powerPointTitle: "",
            powerPointImage: "",
            PPtBgtype: "color",
            PPtBgValue1: "",
            PPtBgValue2: "",
          }}
        >
          <Form.Item
            label="标题"
            name="powerPointTitle"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Input style={{ width: "100%" }} />
          </Form.Item>
          <Form.Item label="缩略图地址" name="powerPointImage">
            <Input style={{ width: "100%" }} />
          </Form.Item>
          {/* <Form.Item
            label="背景类型"
            name="PPtBgtype"
            rules={[{ required: true, message: "不得为空" }]}
          >
            <Select
              style={{ width: "100%" }}
              options={[
                { label: "颜色", value: "color" },
                { label: "渐变", value: "gradient" },
                { label: "图像", value: "img" },
              ]}
            />
          </Form.Item>
          {PPtBgtypeWatch === "color" && (
            <Form.Item
              label="颜色"
              name="PPtBgValue1"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
          )}
          {PPtBgtypeWatch === "img" && (
            <Form.Item
              label="图像地址"
              name="PPtBgValue1"
              rules={[{ required: true, message: "不得为空" }]}
            >
              <Input style={{ width: "100%" }} />
            </Form.Item>
          )}
          {PPtBgtypeWatch === "gradient" && (
            <>
              <Form.Item
                label="渐变开始颜色"
                name="PPtBgValue1"
                rules={[{ required: true, message: "不得为空" }]}
              >
                <Input style={{ width: "100%" }} />
              </Form.Item>
              <Form.Item
                label="渐变结束颜色"
                name="PPtBgValue2"
                rules={[{ required: true, message: "不得为空" }]}
              >
                <Input style={{ width: "100%" }} />
              </Form.Item>
            </>
          )} */}
        </Form>
      </Drawer>
      {/* 文本弹窗 */}
      {/* // 显示文本模态框 */}
      <TextModal
        // 是否显示文本模态框
        visibleTextModal={visibleTextModal}
        // 是否为添加操作
        isAdd={isAdd}
        // 元素索引
        elementsIndex={elementsIndex}
      />
      {/* 视频弹窗 */}
      {/* // 显示视频模态框 */}
      <VideoModal
        // 是否显示视频模态框
        visibleVideoModal={visibleVideoModal}
        // 是否为添加操作
        isAdd={isAdd}
        // 元素索引
        elementsIndex={elementsIndex}
      />
      {/* 图片弹窗 */}
      {/* // 显示图片模态框 */}
      <ImageModal
        // 图片模态框是否可见
        visibleImageModal={visibleImageModal}
        // 是否为添加图片
        isAdd={isAdd}
        // 元素索引
        elementsIndex={elementsIndex}
      />
    </div>
  );
};

export default PPTEditBlock;
